<template>
  <div class="app-container" v-loading="loading">

    <el-row :gutter="10">
      <el-col :span="19">
        <CommonContainer title="信审批复建议">
          <div class="suggestionInfo">
            <div class="apprvalStatus flex-xy-center"
                 :class="[detailInfo.approvalStatus==4 ?'active1':'',detailInfo.approvalStatus==5?'active2':'',detailInfo.approvalStatus==6?'active3':'']">
              <span v-if="detailInfo.rejectionMark==1">批复建议被驳回</span>
              <span v-else>{{ detailInfo.approvalStatus|creditSuggestionApprovalStatus }}</span>
            </div>
            <el-form ref="form" label-width="auto" label-position="right">
              <el-form-item label="信审批复建议:" prop="approval">
                {{ detailInfo.creditReviewResult|creditSuggestionApproval }}
              </el-form-item>
              <div style="margin-bottom: 20px">
                <p class="quota">信审额度:</p>
                <div class="table-title-wrap flex-row-center">
                  <p class="statisticInfo">申请总台数: <span>{{ detailInfo.totalApplicationNumber }}</span></p>
                  <p class="statisticInfo">通过总台数: <span>{{ detailInfo.totalPassNumber }}</span></p>
                  <p class="statisticInfo">拒绝总台数: <span>{{ detailInfo.totalRejectNumber }}</span></p>
                </div>
                <el-table
                    :data="detailInfo.cars"
                    :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                  <el-table-column
                      align="center"
                      prop="vehicleManufacturers"
                      label="车辆厂商"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="vehicleModel"
                      label="车辆车型"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="vehicleStyle"
                      label="车辆款型"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="carNo"
                      label="车牌号"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="vehicleEnergyType"
                      label="车辆能源类型"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="registrationNature"
                      label="登记性质"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="applicationType"
                      label="申请类型"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="leaseTerm"
                      label="租赁期限(月)"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="rentPaymentMethod"
                      label="租金支付方式"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="mileageLimit"
                      label="里程限制（公里)"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="registeredCity"
                      label="上牌城市"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="registrationFee"
                      label="上牌费"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="insurancePremium"
                      label="保险费"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="maintenancePremium"
                      label="维保费"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="purchaseTax"
                      label="购置税"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="vehicleAndVesselTax"
                      label="车船税"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="installationCost"
                      label="加装费用"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="otherExpenses"
                      label="其他费用"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="irr"
                      label="IRR（含牌照）"
                      min-width="120">
                    <template v-slot="{row}">
                      <template v-if="row.irr">{{row.irr}}%</template>
                      <template v-else>--</template>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="margin"
                      label="保证金"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="monthlyRent"
                      label="月租金"
                      min-width="120">
                  </el-table-column>
                  <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                    <template v-slot="{row}">
                      <template v-if="row.firstInstallmentRentalRatio">
                        {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                      </template>
                      <template v-else>
                        -- 、--
                      </template>

                    </template>
                  </el-table-column>
                  <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                      <template v-if="row.residualValueRatio">
                        {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                      </template>
                      <template v-else>
                        -- 、--
                      </template>

                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="suggestedPrice"
                      label="厂商指导价"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="purchasePrice"
                      label="新车采购单价"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="currentValuation"
                      label="旧车当前估值"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="numberOfApplications"
                      label="申请台数"
                      min-width="120">
                  </el-table-column>
                  <el-table-column
                      prop="numberOfUnitsPassed"
                      align="center"
                      label="通过台数"
                      min-width="160">
                  </el-table-column>
                  <el-table-column
                      prop="rejectedUnits"
                      align="center"
                      label="拒绝台数"
                      min-width="160">

                  </el-table-column>

                </el-table>
              </div>


              <el-form-item label="说明:" prop="remark">
                {{ detailInfo.remark|filterNull }}
              </el-form-item>
              <el-form-item label="附件:">
                <image-common disabled :up-type="2" v-model="detailInfo.annex"></image-common>
              </el-form-item>
            </el-form>

          </div>
        </CommonContainer>
      </el-col>
      <el-col :span="5">
        <flow-record v-if="detailInfo.flowId" :id="detailInfo.flowId" :custom-style="customerStyle"></flow-record>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {approvalSuggestionsDetails} from '@/api/letterReview/letterReview'
import ApprovalInfo from "@/views/letterReview/letterReview/components/ApprovalInfo.vue";

export default {
  components: {ApprovalInfo},
  data() {
    // 这里存放数据
    return {
      customerStyle: 'margin:0 0 20px',
      loading: false,
      detailInfo: {}
    }
  },
  // 方法集合
  methods: {
    getDetail() {
      this.loading = true
      approvalSuggestionsDetails(this.$route.query.id).then(res => {
        this.detailInfo = res.data
      }).finally(() => {
        this.loading = false
      })
    }

  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  created() {
    this.getDetail()
  },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884FF;
  }
}

.suggestionInfo {
  position: relative;

  .apprvalStatus {
    position: absolute;
    right: 40px;
    width: 80px;
    height: 80px;
    font-size: 14px;
    text-align: center;
    border-radius: 40px;

    &.active1 {
      color: orange;
      border: orange solid 1px;
    }

    &.active2 {
      color: red;
      border: red solid 1px;
    }

    &.active3 {
      color: green;
      border: green solid 1px;
    }
  }
}

.rightInfo {
  font-size: 14px;
  color: #1890FF;
}

.quota {
  font-size: 14px;
  //font-weight: bold;
  color: #606266;
  position: relative;
  left: 20px;

}
</style>
